<template>
  <div class="FormParse">
    <a-form :model="modelData" labelAlign="left">
      <template v-for="(item, index) in template" v-if="template && template.length > 0">
        <!-- text输入框 -->
        <template v-if="item.type === 'input'">
          <a-form-item v-if="item.options.type == 'text'" :label="item.label" :name="item.modelValue">
            <a-input v-model:value="modelData[item.modelValue]" 
            :placeholder="item.options.placeholder" 
            :disabled="disabled ? disabled : item.options.disabled" 
            :defaultValue="item.options.defaultValue"/> 
          </a-form-item>
        </template>

        <template v-if="item.type === 'input'">
          <a-form-item v-if="item.options.type == 'number'" :label="item.label" :name="item.modelValue">
            <a-input-number v-model:value="modelData[item.modelValue]" 
            :disabled="disabled ? disabled : item.options.disabled" 
            :min="item.options.min == undefined ? 'Infinity' : item.options.min" 
            :max="item.options.max == undefined ? 'Infinity' : item.options.max" />
          </a-form-item>
        </template> 

        <template v-if="item.type === 'input'">
          <a-form-item v-if="item.options.type == 'password'" :label="item.label" :name="item.modelValue">
             <a-input-password v-model:value="modelData[item.modelValue]" :placeholder="item.options.placeholder"
             :disabled="disabled ? disabled : item.options.disabled" 
             :defaultValue="item.options.defaultValue" />
          </a-form-item>
        </template> 

        <template v-if="item.type === 'textarea'">
          <a-form-item :label="item.label" :name="item.modelValue">
             <a-textarea v-model:value="modelData[item.modelValue]" :placeholder="item.options.placeholder" 
             :disabled="disabled ? disabled : item.options.disabled" 
             :defaultValue="item.options.defaultValue"/>
          </a-form-item>
        </template>

        <template v-if="item.type === 'select'">
          <a-form-item :label="item.label" :name="item.modelValue">
            <a-select v-model:value="modelData[item.modelValue]" style="width: 120px" :disabled="disabled ? disabled : item.options.disabled">
              <a-select-option v-for="(child, index2) in item.options.children" :key="index2" :value="child.value">{{ child.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </template>

        <template v-if="item.type === 'checkbox'">
          <a-form-item :label="item.label" :name="item.modelValue">
            <a-checkbox-group v-model:value="modelData[item.modelValue]" :disabled="disabled ? disabled : item.options.disabled">
              <a-checkbox v-for="(child, index2) in item.options.children" :key="index2" :value="child.value">{{ child.name }}</a-checkbox>
            </a-checkbox-group>
          </a-form-item>
        </template>

        <template v-if="item.type === 'radio'">
          <a-form-item :label="item.label" :name="item.modelValue">
            <a-radio-group v-model:value="modelData[item.modelValue]" :disabled="disabled ? disabled : item.options.disabled">
              <a-radio v-for="(child, index2) in item.options.children" :key="index2" :value="child.value">{{ child.name }}</a-radio>
            </a-radio-group>
          </a-form-item>
        </template>

        <template v-if="item.type === 'datetime'">
          <a-form-item :label="item.label" :name="item.modelValue" >
              <a-date-picker  :show-time="{ format: 'HH:mm' }"  v-model:value="modelData[item.modelValue]" :placeholder="item.options.placeholder" 
              :disabled="disabled ? disabled : item.options.disabled" format="YYYY-MM-DD HH:mm" @ok="changeDateTime($event, item.modelValue)"/>
          </a-form-item>
        </template>

        <template v-if="item.type === 'picker'">
          <a-form-item :label="item.label" :name="item.modelValue">
            <a-select v-model:value="modelData[item.modelValue]" style="width: 120px" :disabled="disabled ? disabled : item.options.disabled">
              <a-select-option v-for="(child, index2) in item.options.children" :key="index2" :value="child.value">{{ child.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </template>

      </template>

    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ITemplateJSON } from '@/types/approveClassify';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
export interface IFormParseProps {
  template: ITemplateJSON[],
  modelData: any,
  disabled?: boolean
}

const props = withDefaults(defineProps<IFormParseProps>(), {})
dayjs.locale('zh-cn')

props.template.forEach(item => {
  if(item.options.defaultValue) {
    if(props.modelData[item.modelValue]) {

    }else {
      
      props.modelData[item.modelValue] = item.options.defaultValue
    }
  }
  if(item.type == 'datetime') {
    try {
      props.modelData[item.modelValue] = dayjs(props.modelData[item.modelValue])
    } catch (error) {
      props.modelData[item.modelValue] = ''
    }
  }
})

const changeDateTime = (value: any, key: string) => {
  props.modelData[key] = dayjs(value) 
}

const getModelData = () => {
  return props.modelData
}

defineExpose({ getModelData })

</script>

<style scoped lang='scss'>
.FormParse{
  width: 100%;
}
</style>